<template>
  <div class="ref-line-wrap" v-show="canShow">
    <p
      class="line horizontal"
      v-for="(top,index) in horList"
      v-show="showHorizon(top)"
      :key="`h-${index}`"
      :style="`top:${top}px`"
    ></p>
    <p
      class="line vertical"
      v-for="(left,index) in verList"
      v-show="showVertical(left)"
      :key="`v-${index}`"
      :style="`left:${left}px`"
    ></p>
  </div>
</template>

<script>
export default {
  name: "ReferLines",
  computed: {
    canShow() {
      return this.$store.state.canSelect;
    },
    screenStyle() {
      return this.$store.state.screenProps;
    },
    curStyle() {
      return this.$store.getters.curStyle;
    },
    compList() {
      let currentID = this.$store.state.currentID;
      return this.$store.state.selectCompList.filter(item => {
        return item.uid !== currentID;
      });
    },
    horList() {
      // let vHor = Math.round(this.vHeight / 2);
      let vHor = Math.round(this.screenStyle.height / 2); // TODO 页面的缩放比也要参与计算

      let hTempList = this.compList.reduce(
        (acc, item) => {
          let top = +item.info.style.top,
            height = +item.info.style.height,
            middle = Math.round(top + height / 2),
            bottom = top + height;

          return acc.concat(top, middle, bottom);
        },
        [vHor]
      );

      return hTempList;
    },
    verList() {
      // let vVer = Math.round(this.vWidth / 2);
      let vVer = Math.round(this.screenStyle.width / 2); // TODO 页面的缩放比也要参与计算

      let vTempList = this.compList.reduce(
        (acc, item) => {
          let left = +item.info.style.left,
            width = +item.info.style.width,
            center = Math.round(left + width / 2),
            right = left + width;

          return acc.concat(left, center, right);
        },
        [vVer]
      );

      return vTempList;
    }
  },
  data() {
    return {
      // vWidth: 0,
      // vHeight: 0
    };
  },
  mounted() {
    // let view = document.getElementsByClassName("view-wrap")[0];
    // this.vWidth = +view.getBoundingClientRect().width;
    // this.vHeight = +view.getBoundingClientRect().height;
  },
  methods: {
    /**
     * 控制水平参考线的显示与否
     */
    showHorizon(val) {
      let curTop = +this.curStyle.top,
        curHeight = +this.curStyle.height,
        curMid = Math.round(curTop + curHeight / 2),
        curBottom = curTop + curHeight,
        tempArr_h = [curTop, curMid, curBottom];

      return tempArr_h.includes(val);
    },
    /**
     * 控制垂直参考线的显示与否
     */
    showVertical(val) {
      let curLeft = +this.curStyle.left,
        curWidth = +this.curStyle.width,
        curCenter = Math.round(curLeft + curWidth / 2),
        curRight = curLeft + curWidth,
        tempArr_v = [curLeft, curCenter, curRight];

      return tempArr_v.includes(val);
    }
  }
};
</script>

<style lang="stylus" scoped>
.line
  position absolute
  border 0.5px dashed red
  &.horizontal
    left 0
    right 0
  &.vertical
    top 0
    bottom 0
</style>
